<template>
  <view class="help-detail">
    <view class="content-box">
      <view v-for="item in contentList" :key="item.key" class="content-item">
        <view v-if="item.type === CONTENT_TYPE.TEXT" class="item-text">{{item.content}}</view>
        <image v-else-if="item.type === CONTENT_TYPE.IMAGE" class="item-image" :src="item.src" mode="widthFix"></image>
        <video v-else-if="item.type === CONTENT_TYPE.VIDEO" class="item-video" :src="item.src"></video>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import cms from '@/utils/cms.js'
import { getGUID, getImagePath, getVideoPath, getFileExt } from '@/utils/index.js'
import { IMAGE_EXT, VIDEO_EXT } from '@/constant/index.js'

export default {
  mixins: [mixin],
  data() {
    return {
      CONTENT_TYPE: {
        TEXT: 'text',
        MEDIA: 'media',
        IMAGE: 'image',
        VIDEO: 'video'
      },
      title: '',
      contentList: []
    }
  },
  mounted() {
    if (this.params.id) {
      this.getHelpDetail(this.params.id)
    }
  },
  methods: {
    getHelpDetail(id) {
      const self = this
      const target = cms.graphQL.queryHelpDetail
      uni.request({
        url: target.url,
        method: 'POST',
        data: {
          query: target.query,
          variables: {
            id,
          },
        },
        success(result) {
          const helpData = result.data?.data?.[target.column]
          if (helpData) {
            self.title = helpData.name || ''
            uni.setNavigationBarTitle({
              title: self.title
            })
            self.contentList = []
            if (helpData.content1) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.TEXT, helpData.content1))
            }
            if (helpData.media1) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.MEDIA, helpData.media1))
            }
            if (helpData.content2) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.TEXT, helpData.content2))
            }
            if (helpData.media2) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.MEDIA, helpData.media2))
            }
            if (helpData.content3) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.TEXT, helpData.content3))
            }
            if (helpData.media3) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.MEDIA, helpData.media4))
            }
            if (helpData.content4) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.TEXT, helpData.content5))
            }
            if (helpData.media4) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.MEDIA, helpData.media4))
            }
            if (helpData.content5) {
              self.contentList.push(self.generateContent(self.CONTENT_TYPE.TEXT, helpData.content5))
            }

          }
        }
      })
    },
    generateContent(type, target) {
      const self = this
      const result = {
        key: getGUID(),
        type,
        content: '',
        src: ''
      }
      if (type === self.CONTENT_TYPE.TEXT) {
        result.content = target
      }
      if (type === self.CONTENT_TYPE.MEDIA) {
        const fileExt = getFileExt(target.publicUrl)
        if (IMAGE_EXT.includes(fileExt)) {
          result.type = self.CONTENT_TYPE.IMAGE
          result.src = getImagePath(target.publicUrl)
        }
        if (VIDEO_EXT.includes(fileExt)) {
          result.type = self.CONTENT_TYPE.VIDEO
          result.src = getVideoPath(target.publicUrl)
        }
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
  .help-detail {
    min-height: 100vh;
    padding: 20rpx 30rpx;
    background-color: $white;
  }
  .content-item {
    text-align: center;
  }
  .item-text {
    text-align: left;
  }
  .item-image {
    margin: 10rpx 0;
    width: 90%;
    height: auto;
    border-radius: 10rpx;
  }
  .item-video {
    margin: 10rpx 0;
    width: 90%;
    height: 500rpx;
    border-radius: 10rpx;
  }
</style>
